<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>品牌查询</title>
    <script th:src="@{/static/js/vue.js}"></script>
    <script th:src="@{/static/js/axios.min.js}"></script>
    <script th:src="@{/static/js/index.js}"></script>
    <link rel="stylesheet" th:href="@{/static/css/index.css}">
</head>
<body>
    <div id="app">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="相册名称">
                <el-input v-model="searchMap.title" placeholder="相册名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="fetchData">查询</el-button>
            </el-form-item>

        </el-form>
            <el-button type="primary" @click="formVisible=true,jimi={},imageUrl='' " icon="el-icon-edit" circle></el-button>
        <el-table
                :data="brand"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="相册名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="image"
                    label="相册封面">
                <template slot-scope="scope">
                    <img :src="scope.row.image" width="100px" height="60px">
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <!--
                    slot-scope：作用域插槽，可以获取表格数据
                    scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法
                -->
                <template slot-scope="scope">
                    <el-button type="success" size="mini" @click="getImages(scope.row.id)">图片列表</el-button>
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row.id),formVisible = true">修改</el-button>
                    <el-button type="danger" size="mini" @click="deleteBrand(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
       <!-- 分页-->
        <el-pagination
                @size-change="fetchData"
                @current-change="fetchData"
                :current-page.sync="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <el-dialog title="编辑" :visible.sync="formVisible">
            <el-form :model="form">
                <el-form-item label="相册名称">
                    <el-input v-model="jimi.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="相册封面">
                    <el-upload
                            class="avatar-uploader"
                            action="/upload/oss"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button @click="save">保存</el-button>
                    <el-button @click="formVisible = false">关闭</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>
    </div>
<script>
    new Vue({
        el:'#app',
        data:{
            brand: [],
            currentPage:1,
            size:10,
            total:0,
            searchMap:{},
            formVisible:false,
            jimi:{},
            imageUrl:''

        },
        created(){
            //this.getBrandList()
            this.fetchData()
        },
        methods: {
            //页面渲染
            /* getBrandList(){
                axios.get("/brand/findList") //后端路径
                    .then(response=>{

                        console.log(response)
                        this.brand=response.data
                    })
            },*/
            fetchData() {
                axios.post(`/album/findPage?pageNum=${this.currentPage}&pageSize=${this.size}`, this.searchMap) //后端路径
                    .then(response => {

                        console.log(response)
                        this.brand = response.data.rows

                        console.log(response.data.rows);
                        this.total = response.data.total
                    })
            },
            save() {
                //图片赋值
                this.jimi.image=this.imageUrl
                var url;
                if (this.jimi.id == null) {
                    url = `/album/add`

                } else {
                    url = `/album/update`
                }

                axios.post(url, this.jimi) //后端路径
                    .then(response => {

                        this.formVisible = false
                        this.fetchData()
                    })
            },
            getImages(id){
                window.location.href="/album/showImages?id="+id;
               /* window.location.href="/ImageItems.html?id="+id*/
            },
            //图片处理
            handleAvatarSuccess(res, file) {
                this.imageUrl = file.response
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //回显数据
            handleUpdate(id) {
                axios.get(`/album/findById?id=${id}`) //后端路径
                    .then(response => {
                        this.jimi = response.data
                        this.imageUrl=this.jimi.image
                    })
            },
            //删除
            deleteBrand(id) {

                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(`/album/delete?id=${id}`)
                        .then(response => {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        })

                    this.fetchData()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    });
</script>
</body>
</html>